<div class="content" fxLayout="row" fxLayoutAlign="center" style="padding-bottom:160px;">

    <mat-card elevation="5" fxFlex>

      <mat-card-subtitle>
        <h2>Quartz Manager</h2>
      </mat-card-subtitle>

      <mat-card-title>
        <h2>{{title}}</h2>
      </mat-card-title>

      <mat-card-content>

        <p [class]="notification.msgType" *ngIf="notification">{{notification.msgBody}}</p>

        <form *ngIf="!submitted" [formGroup]="form" (ngSubmit)="onSubmit()" #loginForm="ngForm">
          <mat-form-field>
            <input matInput formControlName="username" required placeholder="user">
          </mat-form-field>
          <mat-form-field>
            <input matInput formControlName="password" required type="password" placeholder="password">
          </mat-form-field>
          <button type="submit" [disabled]="!loginForm.form.valid" mat-raised-button color="primary">Login</button>
        </form>

        <mat-spinner *ngIf="submitted" mode="indeterminate"></mat-spinner>
      </mat-card-content>

    </mat-card>

</div>
